<body class="login">
	<div class="container">
		<div class="text-center">
			<img src="images/logo.png" alt="Metis Logo">
		</div>
		<div class="tab-content">
			<div id="login" class="tab-pane active">
				<form method="post" action="http://localhost/cms2014/admin/index/login" class="form-signin">
					<p class="text-muted text-center">
						Enter your username and password
					</p>
					<input type="text" name="email" placeholder="Username" class="form-control">
					<input type="password" name="password" placeholder="Password" class="form-control">
					<button class="btn btn-lg btn-primary btn-block" type="submit">
						Sign in
					</button>
				</form>
			</div>
			<div id="forgot" class="tab-pane">
				<form action="index.html" class="form-signin">
					<p class="text-muted text-center">
						Enter your valid e-mail
					</p>
					<input type="email" placeholder="mail@domain.com" required="required" class="form-control">
					<br>
					<button class="btn btn-lg btn-danger btn-block" type="submit">
						Recover Password
					</button>
				</form>
			</div>
		</div>
		<div class="text-center">
			<ul class="list-inline">
				<li>
					<a class="text-muted" href="#login" data-toggle="tab">Login</a>
				</li>
				<li>
					<a class="text-muted" href="#forgot" data-toggle="tab">Forgot Password</a>
				</li>
			</ul>
		</div>
	</div>
	<script>
		$(function(){
			$('.list-inline li > a').click(function() {
				var activeForm = $(this).attr('href') + ' > form';
				//console.log(activeForm);
				$(activeForm).addClass('magictime swap');
				//set timer to 1 seconds, after that, unload the magic animation
				setTimeout(function() {
					$(activeForm).removeClass('magictime swap');
				}, 1000);
			});
		})	
	</script>
</body>